<template>
  <div class="date-picker">
    <van-search v-model="showDate" readonly class="search" @click-input="open" placeholder="选择年月">

    </van-search>
    <van-button type="primary" class="btn" size="small" @click="queryClick">查询</van-button>

  </div>
  <teleport to="body">
    <van-popup v-model:show="isShow" position="bottom" round close-on-popstate>
      <van-datetime-picker
        v-show="showCalendar"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        @confirm="onConfirm"
        @cancel="onCanle"
      />
    </van-popup>
  </teleport>
</template>

<script setup lang="ts">
import moment from 'moment';
import { onMounted, ref } from 'vue';

const emits = defineEmits(['query']);

const props = defineProps({
  date: {
    type: String,
    default: moment().format('YYYYMM'),
  },
  queryParam: {
    type: Object,
    default: () => {
      return {
        ny: moment().format('YYYYMM'),
      }
    },
  }
})
// 搜索框中展示的日期
const showDate = ref(moment(props.date).format('YYYY-MM'));

// 是否展示底部弹窗
const isShow = ref(false);
// 是否展示日期选择窗口
const showCalendar = ref(false);
// 当前选择的日期
const currentDate = ref(new Date(showDate.value));

const open = () => {
  isShow.value = true;
  showCalendar.value = true;
}

const onConfirm = (date: any) => {
  showDate.value = moment(date).format('YYYY-MM');
  queryClick();
  showCalendar.value = false;
  isShow.value = false;
}

const onCanle = () => {
  showCalendar.value = false;
  isShow.value = false;
}

const queryClick = () => {
  emits('query', moment(currentDate.value).format('YYYYMM'));
}

</script>

<style lang="less" scoped>
.date-picker {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 1px 5px;
  .search {
    display: flex;
    flex: 1;
    padding: 2px;
  }
  .btn {
    margin-left: 8px;
    width: 60px;
  }
}
</style>
